<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>系统权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<style>
    .layui-form-item {
        margin-top: 10px;
    }
    .layui-form-label {
        text-align: left;
        width: 60px !important;
    }
    .layui-input-block {
       width: 60%;
    }
</style>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<!-- <script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<body>
    <div style="padding-top:10px; padding-left:10px;">
        <button type="button" class="layui-btn test layui-btn-normal layui-btn-sm">新增</button>
    </div>
<table id="test3" lay-filter="test3" class="layui-hide"></table>
<div id="auth" style="width: 500px; height: 300px;display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
          <input type="text" name="name" placeholder="请输入标题" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <input type="text" name="mark"  placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div id="test12" class="demo-tree-more"></div>
    <div class="layui-btn-container" style="padding-top:10px; padding-left:10px; text-align: right;">
        <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">确定添加</button>
      </div>
</div>
<script>
    function findData(){
        layui.use('table', function () {
             debugger;
            var table = layui.table;
            table.render({
                elem: '#test3'
                ,url:'findAllJurisdiction',
                parseData: function(res) {
                    return {
                        "code":'0', //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count":res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                }
                , cols: [
                    [
                        {title: '序号', type: 'numbers', Width: 20}
                        , {field: 'id', title: 'id', edit: 'text', minWidth: 80}
                        , {field: 'jurisdictionName', title: '权限名称', edit: 'text', minWidth: 180, sort: true}
                        , {field: 'remark', title: '备注', minWidth: 80, edit: 'text'}
                    ]
                ]
                , page: true
            });
            table.on('edit(test3)', function (obj) {
                debugger;
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layui.use('jquery', function () {
                    var $ = layui.$;
                    $.ajax({
                        type: 'get',
                        url: "updateJurisdiction", // ajax请求路径
                        data: {
                            id: data.id,
                            field: field,
                            value: value
                        },
                        success: function (data) {
                            $("#test3").empty();
                            table.reload("test3", { //此处是上文提到的 初始化标识id
                                page: {
                                    curr: 1
                                }
                            });
                            layer.msg('修改成功');
                        }
                    });
                });
            })
        })
    }
    $("#search").click(function () {
        findData();
    })
    $(function(){
        findData(null,null);
    });

    var $=layui.$
    $('.test').on('click', function() {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 1,
                title: '创建角色',
                closeBtn: 0,
                area: ['auto'],
                shadeClose: false,
                content: $('#auth')
            })
        }); 
        
        layui.use(['tree', 'util'], function(){
            var tree = layui.tree,
                layer = layui.layer,
                util = layui.util,
                data = [
                    {
                        title: '教职工管理',
                        id: 1,
                        children: [
                            {
                                title: '教职工信息',
                                id: 3
                            },
                             {
                                title: '教职工管理',
                                id: 4   
                            },
                        ]
                    }
               ]
        
            //基本演示
            tree.render({
                elem: '#test12',
                data: data,
                showCheckbox: true,  //是否显示复选框,
                id: 'demoId1'
            });

            //按钮事件
            util.event('lay-demo', {
                getChecked: function(othis){
                    var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                    alert(JSON.stringify(checkedData))
                    layer.closeAll()
                    console.log(checkedData);

                }
            });
        })       
    })
</script>
</body>
</html>